Web Designの大まかな流れ
#WIP
久々に作るぞ!ってときにエッセンスと流れを思い出せるようにしておきたいmrsekut.icon
情報設計
IA
Domain Modelingもこのタイミングでやると良いmrsekut.icon
認識を合わせるために
ワイヤーフレーム、モックアップ、プロトタイプを作ったり作らなかったりする
大切なのは、チームにとって不明な点を適切に把握し、不明な点に対してどの種類の中間成果物が理解を深めてくれるかを考えることです。ref
ワイヤーフレーム
モックアップ
この辺がFigma
UIデザインの根拠を全て言語化して残す
デザイン
OOUI
デザイン
UIのカタログ
デザイン時に状態変化を意識する
プロトタイプ設計
試作品をたくさん作る
とにかく雑に作る
なくても伝わるものは削る
多機能でも「簡単そう」と思わせる
作るのも使うのもすべて簡単であること
必要なタイミングで必要な要素を出す
仮説→試行→歓喜を体験させる
利用者の視点でインターフェースを設計する
デザインする時に気にかける箇所
細かいルールとかはDesign Systemの具体例とか見ると参考になるかもしれない
Layout Grid Guide Lineを使って整列させる
ページ全体のサイズ感、コンテンツ幅、余白を決める
ディスプレイのサイズが大小ある時に差が出にくくする
コンテンツ幅や余白を決めて、ガイドを引く
ベースのfont-sizeを意識する
余白を取る
無理にクリック数を減らそうとしない
ものを並べて表示するUIを作る
CSS実装
そのComponent自体は装飾系のStyleのみを施す
Every Layout
なぜエンジニアが作る画面はダサいのか…? - Qiita
UI設計する時に読むと参考になり思考が進む資料や人物